<template>
  <div>
    <Carousel autoplay
              v-model="value2"
              :autoplay-speed="3000"
              arrow="hover"
              loop>
      <CarouselItem v-for="e in images">
        <div class="demo-carousel">
          <img :src="e.imgurl">
        </div>
      </CarouselItem>
    </Carousel>
    <List border
          size="small">
      <ListItem v-for="(e,i) in list"
                :key="i">
        {{e.filename}}
        <span style="color: #999;font-size: 12px;margin-left: 20px;">-- {{e.singername}}</span>
        <a @click="play(e)">播放</a>
      </ListItem>
    </List>
  </div>
</template>
<script>
import api from '../utils/api.js'

export default {
  data () {
    return {
      list: [],
      images: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      api.getTopList(res => {
        this.images = res.data.obj.banner
        this.list = res.data.obj.data
      })
    },
    play (e) {
      api.musicUrl(e.hash, e.album_id, (res) => {
        let data = res.data.data
        let el = {
          title: data.album_name,
          artist: data.author_name,
          src: data.play_url,
          pic: data.img
        }
        this.$store.commit('music/select', el)
      })
    }
  }
}
</script>

